import React,{useState,useEffect} from 'react'
import { Tabs } from 'antd';
import axios from 'axios';
import "./App.css"


interface Tablist {
   key: number;
   ladel: string;
   children: Array<{word: string}>;
}


const App: React.FC = () => {

  const [newList,setNewList]=useState([])

  const getData=async()=>{
    const res=await axios.get("/api/mockList")
    const {data}=res.data
    setNewList(data)
  }

  useEffect(()=>{
   getData()
  },[])



  const onChange=(key: string)=>{
   console.log(key);
  }

  return (
    <div className='tab_wrap'>
       <Tabs defaultActiveKey="1" onChange={onChange}>
         {newList.map((item: Tablist, ind)=>{
             return <Tabs.TabPane tab={item.ladel} key={ind}>
              {item.children.map((it,i)=>{
                   <p key={i}>
                     <span>{i < 3 ? i + 1 : ""}</span>
                     {it.word}
                   </p>
                })}
         </Tabs.TabPane>
          })}
       </Tabs>
    </div>
  )
}

export default App
